<template>
    <div class="shop">
        <el-tabs v-model="activeName"
      type="card"
      @tab-click="handleClick">

         <el-tab-pane label="红包充值记录"
        name="first">
               <div style="height:40px;">
                <!-- <p style="width:200px;float:left;">粉丝数： {{fansnum}}</p> -->
               <span style="margin-top:3px;color:#666666;">充值来源：</span>
               <el-select v-model="recchargeForm.source_from" filterable placeholder="充值来源" size="mini" style="width:160px;">
                     <el-option label="全部" value="0"></el-option>
                     <el-option label="加入会员送红包" value="20"></el-option>
                     <el-option label="优惠买单送红包" value="25"></el-option>
                     <el-option label="充值红包" value="30"></el-option>
                     <el-option label="发送红包过期退回" value="35"></el-option>
                     <el-option label="未核销红包退回" value="40"></el-option>
                     <el-option label="买单送红包" value="50"></el-option>
                     <el-option label="后台充值" value="55"></el-option>
                     <el-option label="发送红包撤回" value="60"></el-option>
                     <el-option label="发送红包过期退回" value="65"></el-option>
                     <el-option label="小店送红包" value="70"></el-option>
                     <el-option label="移除小店退回" value="75"></el-option>
                     <el-option label="过期扣除" value="90"></el-option>
               </el-select>
               <el-input size="mini"
                  v-model="recchargeForm.keyword"
                  style="float:right;margin-left:12px;width:160px;"
                   placeholder="请输入手机号搜索">
                <i slot="suffix" class="el-input__icon el-icon-search"  @click="searchIspRendRecharge"></i>
                 </el-input>

                </div>
                <div class="line"></div>
                <el-table :data="rechargeData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label="日期" prop="create_time"></el-table-column>
      <el-table-column label="充值红包金额" prop="money_tlj"></el-table-column>
      <el-table-column label="充值来源">
          <template slot-scope="scope">
                     <p v-if="scope.row.source_from ==20"  >加入会员送红包</p>
                     <p v-if="scope.row.source_from ==25" >优惠买单送红包</p>
                     <p v-if="scope.row.source_from ==30" >充值红包</p>
                     <p v-if="scope.row.source_from ==35" >发送红包过期退回</p>
                     <p v-if="scope.row.source_from ==40" >未核销红包退回</p>
                     <p v-if="scope.row.source_from ==50" >买单送红包</p>
                     <p v-if="scope.row.source_from ==55" >后台充值</p>
                     <p v-if="scope.row.source_from ==60" >发送红包撤回</p>
                     <p v-if="scope.row.source_from ==65" >发送红包过期退回</p>
                     <p v-if="scope.row.source_from ==70" >小店送红包</p>
                     <p v-if="scope.row.source_from ==75" >移除小店退回</p>
                     <p v-if="scope.row.source_from ==90" >过期扣除</p>
          </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
      </el-table>
       <div class="pagination">
        <el-pagination background
          @current-change="rechargepageChange"
          :current-page="recchargeForm.rechargePage"
          :page-size="recchargeForm.rechargeSize"
          layout="total, prev, pager, next, jumper"
          :total="rechargeTotal"></el-pagination>
      </div>
         </el-tab-pane>

         <el-tab-pane label="发红包记录"
        name="second">
                    <div style="height:40px;">
                <!-- <p style="width:200px;float:left;">粉丝数： {{fansnum}}</p> -->
               <span style="margin-top:3px;color:#666666;">红包类型：</span>
               <el-select v-model="sendRedForm.type" filterable placeholder="红包类型" size="mini" style="width:120px;">
                     <el-option label="全部" value="0"></el-option>
                     <el-option label="普通红包" value="1"></el-option>
                     <el-option label="拼手气红包" value="2"></el-option>
               </el-select>
               <span style="margin-top:3px;color:#666666;margin-left:12px;">领取状态：</span>
               <el-select v-model="sendRedForm.status" filterable placeholder="领取状态" size="mini" style="width:120px;">
                     <el-option label="全部" value="0"></el-option>
                     <el-option label="未领取" value="1"></el-option>
                     <el-option label="已领取" value="2"></el-option>
                     <el-option label="已失效" value="3"></el-option>
               </el-select>
               <el-input size="mini"
                  v-model="sendRedForm.phone"
                  style="float:right;margin-left:12px;width:160px;"
                   placeholder="请输入手机号搜索">
                <i slot="suffix" class="el-input__icon el-icon-search"  @click="searchIspSendRed"></i>
                 </el-input>

                </div>
                <div class="line"></div>
                <el-table :data="sendData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label="发送时间" prop="created_at"></el-table-column>
      <el-table-column label="红包面额" prop="money_total"></el-table-column>
      <el-table-column label="红包类型">
          <template slot-scope="scope">
                     <p v-if="scope.row.type ==0">普通红包</p>
                     <p v-if="scope.row.type ==1" >拼手气红包</p>
          </template>
      </el-table-column>
      <el-table-column label="红包数量" prop="num_total"></el-table-column>
      <el-table-column label="状态">
          <template slot-scope="scope">
                     <p v-if="scope.row.status ==1" >已发放</p>
                     <p v-if="scope.row.status ==2">已领取</p>
                     <p v-if="scope.row.status ==3" >已失效</p>
          </template>
      </el-table-column>
      <el-table-column label="已领取数量" >
          <template slot-scope="scope">
              {{Number(scope.row.num_total) - Number(scope.row.num)}}
          </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button size="mini" @click="getRedPacketDetail(scope.row.id)">领取详情</el-button>
        </template>
      </el-table-column>
      </el-table>
       <div class="pagination">
        <el-pagination background
          @current-change="sendpageChange"
          :current-page="sendRedForm.sendPage"
          :page-size="sendRedForm.sendSize"
          layout="total, prev, pager, next, jumper"
          :total="sendTotal"></el-pagination>
      </div>

        <jdialog title="红包充值记录" :visible.sync='isShowPacketRecord'>
       <el-table :data="receiveData" style="width:640px;padding:25px;"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label="用户昵称" prop="username"></el-table-column>
      <el-table-column label="领红包金额">
        <template slot-scope="scope">
          ¥{{scope.row.receive_money}}
        </template>
      </el-table-column>
      <el-table-column label="领取时间" prop="created_at"></el-table-column>
       </el-table>

        <el-pagination background
        class="pagination"
          @current-change="receivepageChange"
          :current-page="receivePage"
          :page-size="receiveSize"
          layout="total, prev, pager, next, jumper"
          :total="receiveTotal"></el-pagination>
    </jdialog>
         </el-tab-pane>
        </el-tabs>
    </div>
</template>


<script>
// import {
//   cardUserIncomeIdSearch,
//   serviceProviderSendRedpacket
// } from "@/api/service"
// import {shopRedPacketReceiveUser} from '@/api/shopdetail'
export default {
    data() {
        return {
            //1 红包充值记录  2发红包记录
            activeName:'first',
            serviceId: '',
            recchargeForm:{
                source_from:'',
                keyword:'',
                rechargePage:1,
                rechargeSize:20,
            },
            rechargeTotal:0,
            rechargeData:[],

            sendRedForm:{
                type:'0',
                phone:'',
                status:'0',
                sendPage:1,
                sendSize:20,
            },
            sendTotal:0,
            sendData:[],
            isShowPacketRecord:false,
            receivePage:1,
            receiveSize:20,
            receiveData:[],
            receiveTotal:0,
            currentId:'',
        }
    },
    mounted () {
      this.serviceId = this.$route.query.serviceId
      if(this.activeName == 'first'){
          this.getcardUserIncomeIdSearchData()
      }
    },
    methods: {
      handleClick (tab) {
      if(tab.index == 0){
        this.recchargeForm.rechargePage = 1
        this.getcardUserIncomeIdSearchData()
      }else if(tab.index == 1){
        // this.getShopListData()
        this.sendRedForm.sendPage = 1
        this.getserviceProviderSendRedpacketData()
      }
      },
      searchIspRendRecharge(){
         this.recchargeForm.rechargePage = 1
         this.getcardUserIncomeIdSearchData()
      },
      rechargepageChange(page){
        this.recchargeForm.rechargePage = page
        this.getcardUserIncomeIdSearchData()
      },

      async getcardUserIncomeIdSearchData(){
          if(this.recchargeForm.source_from == 0){
              this.recchargeForm.source_from = ''
          }
          var url = 'id='+this.serviceId+
                    '&keyword='+this.recchargeForm.keyword+
                    '&source_from='+this.recchargeForm.source_from+
                    '&page='+this.recchargeForm.rechargePage+
                    '&size='+this.recchargeForm.rechargeSize

        let res = await cardUserIncomeIdSearch(this.serviceId,url)
        if(res.code === 10000){
           this.rechargeData = res.data.data
           this.rechargeTotal = res.data.total
        }else{
            this.$message.error(res.message)
        }
      },

      sendpageChange(page){
           this.sendRedForm.sendPage = page
           this.getserviceProviderSendRedpacketData()
      },
      searchIspSendRed(){
         this.sendRedForm.sendPage = 1
         this.getserviceProviderSendRedpacketData()
      },
      async getserviceProviderSendRedpacketData()
      {
          var url = 'page='+this.sendRedForm.sendPage+
                    '&size='+this.sendRedForm.sendSize+
                    '&status='+this.sendRedForm.status+
                    '&type='+this.sendRedForm.type+
                    '&phone='+this.sendRedForm.phone+
                    '&uid='+this.serviceId
        let res = await serviceProviderSendRedpacket(url)
        if(res.code === 10000){
            this.sendData = res.data.data
            this.sendTotal = res.data.total
        }else{
            this.$message.error(res.message)
        }
      },

    getRedPacketDetail(id){
      this.currentId = id
        this.getshopRedPacketReceiveUserData(id)
    },
    receivepageChange(page){
      this.receivePage = page
      this.getshopRedPacketReceiveUserData(this.currentId)
    },
    async getshopRedPacketReceiveUserData(id){
      var url  = 'page='+this.receivePage+
                 '&size='+this.receiveSize+
                 '&id='+id
      let res = await shopRedPacketReceiveUser(url)
      if(res.code === 10000){
         this.isShowPacketRecord = true
         this.receiveData = res.data.data
         this.receiveTotal  = res.data.total
      }else{
        this.$message.error(res.message)
      }
    },
     tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    }
}
</script>

<style lang="scss" scoped>
.shop{
    padding: 20px;
     .line{
    height: 1px;
    background-color: #e5e5e5;
    margin:0px 0 20px;
     }
    .pagination{
        float: right;
        margin: 20px 0;
    }

}
</style>
